<template>
  <div v-if="bgDate.length !=0 " class="block">
    <el-pagination
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :date="tableData"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['pagesizes', 'dateSource', 'total'],
  data() {
    return {
      tableData: [], // 存取组件渲染的数据
      bgDate: [], // 存取数据源
      // 默认每页条数
      sizeChange: 5,
      // 当前页数，支持 .sync 修饰符
      currentPage: 1
    }
  },
  watch: {
    // 监听数据源dateSource,dateSource将会用到el-pagination中的:data上
    dateSource(val) {
      console.log('监听数据源:', val)
      this.bgDate = val
      this.showPagination(this.currentPage)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
      this.currentPage = 1
      this.sizeChange = val
    },
    handleCurrentChange(val) {
      this.$emit('currentPage', val)
      this.currentPage = val
    },
    // 这个方法主要是用来判断当前页面显示什么数据
    // 通过当前页面数curPage，来判断从数据源中获取指定的数据
    showPagination(curPage) {
      console.log('页面数范围', curPage)
      this.tableData = []
      var bgLen = this.bgDate.length
      // sizeChange 默认每页条数
      var left = this.sizeChange * (curPage - 1)
      var right = this.sizeChange * curPage
      for (var i = 0; i < bgLen; i++) {
        if (i >= left && i < right) {
          this.tableData.push(this.bgDate[i])
        }
      }
      // 触发父组件的方法（告知父组件显示什么数据）
      this.$emit('showDate', this.tableData)
    },
    // 删除item项
    handleDelete() {
    //   /**
    //    * 作用：从后面开始删除数
    //    * 判断页面的数据是否没有，如果没有就自动跳转到前一页
    //    **/
      this.showPagination(this.currentPage)
      if (
        Math.ceil(this.tableData.length / this.sizeChange) !==
          this.currentPage &&
        this.currentPage !== 1
      ) {
        this.handleCurrentChange(this.currentPage - 1)
      }
    }
  }
}
</script>
